<!-- Horizontal Form -->
<div class="box box-info">
    <div class="box-header with-border">
        <h3 class="box-title">添加菜单</h3>
    </div>
    <!-- /.box-header -->
    <!-- form start -->
    <form class="form-horizontal">
        <div class="box-body">
            <div class="form-group">
                <label for="nameId" class="col-sm-2 control-label">类型</label>
                <div class="col-sm-10 typeRadio">
                    <label class="radio-inline">
                        <input type="radio" name="typeId" value="1" checked> 菜单 </label>
                    <label class="radio-inline">
                        <input type="radio" name="typeId" value="2"> 按钮 </label>
                </div>
            </div>
            <div class="form-group">
                <label for="nameId" class="col-sm-2 control-label">菜单名称</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control"  id="nameId" placeholder="名称">
                </div>
            </div>
            <div class="form-group">
                <label for="parentId" class="col-sm-2 control-label">上级菜单</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control load-sys-menu" readonly="readonly" id="parentId" placeholder="上级菜单">
                </div>
            </div>
            <div class="form-group">
                <label for="urlId" class="col-sm-2 control-label">菜单URL</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control"  id="urlId" placeholder="url">
                </div>
            </div>
            <div class="form-group">
                <label for="permissionId" class="col-sm-2 control-label">授权标识：</label>
                <div class="col-sm-10">
                    <input type="text" id="permissionId"
                           placeholder="多个用逗号分隔，如：user:list,user:create"
                           class="form-control">
                </div>
            </div>
            <div class="form-group">
                <label for="sortId" class="col-sm-2 control-label">排序号：</label>
                <div class="col-sm-10">
                    <input type="text" id="sortId" placeholder="排序号"
                           class="form-control">
                </div>
            </div>
        </div>
        <!-- /.box-body -->
        <div class="box-footer">
            <button type="button" class="btn btn-default btn-cancel">Cancel</button>
            <button type="button" class="btn btn-info pull-right btn-save">Save</button>
        </div>
        <!-- /.box-footer -->
    </form>
    <!-- zTree 对应的div -->
    <div class="layui-layer layui-layer-page layui-layer-molv layer-anim" id="menuLayer" type="page" times="2" showtime="0" contype="object"
         style="z-index:59891016; width: 300px; height: 450px; top: 100px; left: 500px; display:none">
        <div class="layui-layer-title" style="cursor: move;">选择菜单</div>
        <div class="layui-layer-content" style="height: 358px;">
            <div style="padding: 10px;" class="layui-layer-wrap">
                <ul id="menuTree" class="ztree"></ul>    <!-- 动态加载树 -->
            </div>
        </div>
        <span class="layui-layer-setwin"> <a class="layui-layer-ico layui-layer-close layui-layer-close1 btn-cancel" ></a></span>
        <div class="layui-layer-btn layui-layer-btn-">
            <a class="layui-layer-btn0 btn-confirm">确定</a>
            <a class="layui-layer-btn1 btn-cancel">取消</a>
        </div>
    </div>
</div>
<script type="text/javascript" src="bower_components/ztree/jquery.ztree.all.min.js"></script>
<script type="text/javascript" src="bower_components/layer/layer.js">
</script>
<script type="text/javascript">

    var zTree; //zTree是第三方扩展的一个Jquery插件
    //初始化zTree时会用到
    var setting = {
        data : {
            simpleData : {
                enable : true,//表示使用简单数据模式
                idKey : "id",  //节点数据中保存唯一标识的属性名称
                pIdKey : "parentId",  //节点数据中保存其父节点唯一标识的属性名称
                rootPId : null  //根节点id
            }//json 格式javascript对象
        }
    }//json 格式的javascript对象
    $(function(){
        // 加载数据
        doInitEditFormData();
        // 绑定点击上级菜单按钮的点击事件
        $(".load-sys-menu").click(doLoadMenus);
        // ZTree弹出框取消按钮：隐藏弹出框
        $("#menuLayer .btn-cancel").click(doHideZTree);
        // ZTree弹出框确认按钮
        $("#menuLayer .btn-confirm").click(doConfirm)
        // 页面数据保存
        $(".box-footer").on("click",".btn-save",doSaveOrUpdate);
        //$(".box-footer").on("click",".btn-cancle",doCancle);
        // 返回上一级菜单
        $(".box-footer .btn-cancel").click(doCancle);
    })

    function doInitEditFormData() {
        var rowData = $("#mainContentId").data("rowData");
        if (rowData) {
            $(`input[value=${rowData.type}]`).prop("checked", true);// 类型
            $("#nameId").val(rowData.name);// 名称
            $("#parentId").data("parentId",rowData.parentId);
            $("#parentId").val(rowData.parentName);
            $("#urlId").val(rowData.url);
            $("#permissionId").val(rowData.permission);
            $("#sortId").val(rowData.sort);
        }
    }
    //提交表单数据
    function doSaveOrUpdate(){
        //1.获取表单数据
        let type=$("form input:radio:checked").val();
        let name=$("#nameId").val();
        let parentId=$("#parentId").data("parentId");
        let url=$("#urlId").val();
        let permission=$("#permissionId").val();
        let sort=$("#sortId").val();
        //2.校验表单数据
        //3.异步提交表单数据并基于响应结果刷新页面.
        let saveUrl="/menu/doSaveObject";
        let params={
            name:name,
            type:type,
            parentId:parentId,
            url:url,
            permission:permission,
            sort:sort
        }
        console.log(params);
        $.post(saveUrl,params,function(result){
            if(result.state==1){
                alert(result.message);
                $("#mainContentId").load("/menu/menu_list");
            }else{
                alert(result.message);
            }
        })
    }
    //点击ztree中的确定按钮时执行此函数
    function doConfirm(){
        //1.获取菜单树中选中的菜单对象,
        let nodes=zTree.getSelectedNodes();//查官方treejs.cn
        //console.log(nodes);//输出的目的是检测选中的结果是什么?
        //2.获取选中zTree节点的id和name,并将其值填充到表单上.
        //2.1借助jquery中data函数将节点id值存储到某个对象上,其语法为:
        //data(key[,value]),假如只指定key表示取值,两个都指定就存.
        $("#parentId").data("parentId",nodes[0].id);
        //2.2借助jquery中val函数将name值填充到表单中,val函数的具体语法
        //val([value]),当没有value时表示获取值,当value时表示赋值.
        $("#parentId").val(nodes[0].name);
        //3.隐藏zTree对象
        doHideZTree();
    }
    //点击zTree中的cancel按钮或右上角的close叉号时执行此函数
    function doHideZTree(){
        $("#menuLayer").css("display","none");
    }

    function doCancle() {
        // 移除maincontentId
        //console.log("123");
        //debugger
        $("#mainContentId").removeData();
        $("#mainContentId").load("/menu/menu_list");

    }
    //点击上级菜单时执行此函数加载菜单数据并以tree结构进行呈现.
    function doLoadMenus(){
        //debugger
        let url="menu/doFindZtreeMenuNodes";
        $.getJSON(url,function(result){
            zTree=$.fn.zTree.init($("#menuTree"),setting,result.data);
            $("#menuLayer").css("display","block");//显示ztree对应的div
        })
    }
</script>